<template lang="pug">
  .area-manage
    .sec.sec-2.mt-20
      .sec-title 区域管理
      .sec-container
        .tab-container
          .handle-box
            Row
              Col(:lg="24" :xl="16").col.mb-10
                .font-14 参保地区：
                Input.mr-15(placeholder="请输入" style="width: auto")
                .font-14 社保方案：
                Input.mr-15(placeholder="请输入" style="width: auto")
                Button(type="primary") 查询
              Col(:lg="24" :xl="8")
                Row(type="flex" justify="end")
                  Col.ml-15
                    Button(type="primary" @click="modalShow = true") 新增
                  Col.ml-15
                    Button(type="primary") 修改
                  Col.ml-15
                    Button(type="primary") 删除
          .odd-manage
            Table(border width="100%" stripe :columns="columns2" :data="data3")
            div(style="margin: 10px;overflow: hidden")
              div(style="float: right;")
                Page(:total="100" :current="1" prev-text="上一页" next-text="下一页" @on-change="")
    Modal.add-modal.input-style-1(v-model="modalShow" fullscreen title="新增")
      Row.mb-15
        Col(span="12")
          .d-flex
            .font-14 参保地区：
            Select(v-model='selectValue', filterable, style="width:200px")
              Option(v-for='item in cityList', :value='item.value', :key='item.value') {{ item.label }}
        Col(span="12")
          .d-flex
            .font-14 参保方案：
            Input(placeholder="请输入" style="width: 200px")
      Divider
      Row.text-center.mb-10(:gutter="16")
        Col(span="3") 险种
        Col(span="3") 默认基数
        Col(span="3") 最低基数
        Col(span="3") 最高基数
        Col(span="3") 缴纳比例
        Col(span="3") 缴纳金额
        Col(span="3") 是否补缴
        Col(span="3") 收费精度
      Row.mb-10(v-for="(item,index) in getData" :key="index" type="flex" align="middle" :gutter="16").text-center
        Col(span="3") {{item}}:
        Col(span="3")
          Input(type="number" clearable)
        Col(span="3")
          Input(type="number" clearable)
        Col(span="3")
          Input(type="number" clearable)
        Col(span="3")
          Input(type="number" clearable)
        Col(span="3")
          Input(type="number" clearable)
        Col(span="3")
          Checkbox() 补缴
        Col(span="3")
          Select
            Option(value="0") 精度1
            Option(value="1") 精度2
      Row.mb-15.text-center(:gutter="16" type="flex" align="middle")
        Col(span="3") 所有险种
        Col(span="3")
          Input(type="number" clearable)
        Col(span="3")
          Input(tpe="number" clearable)
        Col(span="3")
          Input(tpe="number" clearable)
        Col(span="3")
        Col(span="3")
        Col(span="3")
          Checkbox() 补缴
        Col(span="3")
          Select
            Option(value="0") 精度1
            Option(value="1") 精度2
      Divider
      Row.mb-15
        Col(span="12")
          .d-flex
            .font-14 大病医疗收费方式：
            Select(v-model='meansSelectVaule', style="width:200px" placement="top" @on-change="meansSelectFn")
              Option(v-for='item in means', :value='item.value', :key='item.value') {{ item.label }}
        Col(span="12" v-if="monthShow")
          .d-flex
            .font-14 年收费时间：
            Select(style="width:100px" placement="top" on-change="monthSelectFn")
              Option(v-for='item in month', :value='item.value', :key='item.value') {{ item.label }}

</template>

<script>
export default {
  name: 'area-manage',
  data () {
    return {
      modalShow: false,
      columns2: [
        {
          type: 'selection',
          width: 60
        },
        {
          title: '序号',
          key: 'id'
        },
        {
          title: '参保地区',
          key: 'area'
        },
        {
          title: '社保方案',
          key: 'scheme',
          render: (h, params) => {
            return h('span', {
              'class': 'hover-table',
              style: {
                // textDecoration: 'underline',
                color: '#188cc7',
                cursor: 'pointer'
              },
              on: {
                click: () => {
                  window.console.log(params)
                  this.$router.push({ name: 'business-detail' })
                }
              }
            }, params.row.scheme)
          }
        }
      ],
      data3: [
        {
          id: '1',
          area: '北京',
          scheme: '方案一'
        }, {
          id: '2',
          area: '上海',
          scheme: '方案二'
        }
      ],
      cityList: [
        {
          value: '北京',
          label: '北京'
        },
        {
          value: '上海',
          label: '上海'
        },
        {
          value: '长沙',
          label: '长沙'
        },
        {
          value: '深圳',
          label: '深圳'
        },
        {
          value: '广州',
          label: '广州'
        },
        {
          value: '杭州',
          label: '杭州'
        }
      ],
      selectValue: '',
      getData: ['养老单位部分', '养老个人部分', '医疗单位部分', '医疗个人部分', '失业单位部分', '失业个人部分', '工伤单位部分', '工伤个人部分', '生育单位部分', '生育个人部分', '单位大病医疗', '个人大病医疗', '残疾人保障金', '单位门诊医疗', '个人门诊医疗'],
      meansSelectVaule: 1,
      // 是否补缴
      means: [
        {
          value: 1,
          label: '安月收取'
        },
        {
          value: 2,
          label: '安年收取-折算'
        },
        {
          value: 3,
          label: '安年收取-取整'
        }
      ],
      monthShow: false,
      month: [{ value: '1月', label: '1月' }, { value: '2月', label: '2月' }, { value: '3月', label: '3月' }, { value: '4月', label: '4月' }, { value: '5月', label: '5月' }, { value: '6月', label: '6月' }, { value: '7月', label: '7月' }, { value: '8月', label: '8月' }, { value: '9月', label: '9月' }, { value: '10月', label: '10月' }, { value: '11月', label: '11月' }, { value: '12月', label: '12月' }]

    }
  },
  computed: {
    count () {
      let mumbers = this.pieData.map((item) => {
        return item.value
      })
      let sum = 0

      mumbers.forEach((a) => {
        sum += a
      })
      return sum
    }
  },
  methods: {
    meansSelectFn (value) {
      this.meansSelectVaule = value
      if (this.meansSelectVaule != 1) {
        this.monthShow = true
      } else {
        this.monthShow = false
      }
    },
    monthSelectFn (e) {
      console.log(e)
    }
  }
}
</script>

<style lang="less" scoped>
  .d-flex{
    display: flex;
    align-items: center;
  }
</style>
